<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div class="space-x-1">
          <a-button type="primary" @click="onCreateClick">
            <PlusOutlined />
            <span>新增</span>
          </a-button>
        </div>
      </template>

      <template #action="{ record }">
        <div class="space-x-1">
          <a-button type="warning" @click="onEditClick(record)">{{t('common.edit')}}</a-button>
          <a-button type="danger" @click="onDeleteClick(record.id)">{{t('common.delete')}}</a-button>
        </div>
      </template>
    </BasicTable>

    <BasicModal @register="registerModal">
      <BasicForm @register="registerForm"> </BasicForm>
    </BasicModal>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { PageWrapper } from '/@/components/Page';
import { BasicModal, useModal } from '/@/components/Modal';
import { BasicTable, useTable } from '/@/components/Table';
import { BasicForm, useForm } from '/@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';
import { PlusOutlined } from '@ant-design/icons-vue';
import {
  createMaterialType,
  deleteMaterialType,
  getMaterialTypeList,
  updateMaterialType,
} from '/@/api/basic/materialType';
import { MaterialTypeCreateModel } from '/@/api/basic/models/materialTypeModels';
import { nextTick } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';

const { t } = useI18n();
const { notification,createConfirm } = useMessage();

const [registerTable, table] = useTable({
  useSearchForm: true,
  size: 'small',
  formConfig: {
    labelWidth: 120,
    baseColProps: {
      xl: 8,
      md: 12,
      sm: 24,
    },
    schemas: [
      {
        field: 'name',
        component: 'Input',
        label: t('basic.materialType.name'),
      },
    ],
  },
  columns: [
    {
      dataIndex: 'name',
      title: t('basic.materialType.name'),
      width: 200,
    },
    {
      dataIndex: 'description',
      title: t('basic.materialType.description'),
      align: 'left',
    },
    {
      dataIndex: 'action',
      title: '',
      fixed: 'right', 
      align: 'right',
      slots: {
        customRender: 'action',
      },
    },
  ],
  api: async ({ page, pageSize, ...params }) => {
    const res = await getMaterialTypeList({
      skipCount: (page - 1) * pageSize,
      maxResultCount: pageSize,
      ...params,
    });
    return {
      total: res.totalCount,
      items: res.items,
    };
  },
});

const [registerModal, modal] = useModal();

const [registerForm, form] = useForm({
  showActionButtonGroup: false,
  labelWidth: 120,
  baseColProps: {
    span: 20,
  },
  schemas: [
    {
      field: 'id',
      component: 'Input',
      label: 'ID',
      show: false,
    },
    {
      field: 'name',
      component: 'Input',
      label: t('basic.materialType.name'),
      required: true,
    },
    {
      field: 'description',
      component: 'InputTextArea',
      label: t('basic.materialType.description'),
    },
  ],
});

const onCreateClick = () => {
  modal.setModalProps({
    title: t('common.create') + t('basic.materialType.title'),
    visible: true,
    okButtonProps: {
      onClick: async () => {
        await form.validateFields();
        let { name, description } = form.getFieldsValue();
        let model: MaterialTypeCreateModel = { name, description };
        await createMaterialType(model);
        form.resetFields();
        modal.closeModal();
        await table.reload();
        notification.success({ message: t('common.createSuccess') });
      },
    },
  });
};
const onEditClick = (record: any) => {
  modal.setModalProps({
    title: t('common.edit') + t('basic.materialType.title'),
    visible: true,
    okButtonProps: {
      onClick: async () => {
        await form.validateFields();
        let { id, name, description } = form.getFieldsValue();
        let model: MaterialTypeCreateModel = { name, description };
        await updateMaterialType(id, model);
        form.resetFields();
        modal.closeModal();
        await table.reload();
        notification.success({ message: t('common.editSuccess') });
      },
    },
  });
  nextTick(() => {
    form.setFieldsValue(record);
  });
};
const onDeleteClick= async (id: string) => {
  // 删除确认
  createConfirm({
    iconType: 'warning',
    title: t('common.deleteConfirm'),
    content: t('common.deleteConfirmContent'),
    onOk: async () => {
      await deleteMaterialType(id);
      await table.reload();
      notification.success({ message: t('common.deleteSuccess') });
    },
  });
};
</script>
